<template>
  <div>
    <van-list>
      <div class="book-item" v-for="book in books" :key="book.id" @click="bookDetail(book.id)">
        <van-image class="home-hot-book-img" :src="book.img">
        </van-image>
        <div class="content">
          <p class="book-author">作者:{{book.author}}</p>
          <p class="book-gist">简述:{{book.gist}}</p>
          <p class="book-author">热度值:{{book.hot}}</p>
        </div>
      </div>

    </van-list>
  </div>
</template>
<script>
import {ApiService} from "@/axios/apiService";

export default {
  data() {
    return {
      books: []
    }
  },
  mounted() {
    console.log(this.$route.params.catalog2Id)
    console.log(this.$route.params.keyword)
    this.getBookList(this.$route.params.catalog2Id)
  },
  methods: {
    bookDetail(id) {
      console.log(id)
      this.$router.push(
          {
            name:"bookDetail",
            params: {
              bookId:id,
            }
          }
      )
    },
    getBookList(id) {
      console.log(id);
      const api = new ApiService("/book/category2Id")
      api.getParams({
        category2Id: id
      }).then( res => {
        this.books = res.data.data;
      })
    }
  }
}
</script>
<style scoped>
.book-item {
  display: flex;
  height: 20vh;
  width: 100vw;
  background: white
}
.book-author {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical
}
.book-gist {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical
}
.home-hot-book-img {
  width: 39em;
  height: 14vh;
  margin-top: auto;
  margin-bottom: auto;
}
.content {
  width: 294vw;
}
</style>
